<template>
  <qui-page :data-qui-theme="theme" class="content bg">
    <view v-if="loaded && status">
      <!--<scroll-view
        scroll-y="true"
        scroll-with-animation="true"
        show-scrollbar="false"
        class="scroll-y"
        @scrolltolower="pullDown"
      >-->
      <view class="scroll-y">
        <view class="content" v-if="status">
          <view class="ft-gap">
            <view class="bg-white">
              <view class="detail-tip" v-if="thread.isApproved == 0">
                {{ t.examineTip }}
              </view>

              <view class="detail-tip" v-else-if="post.isApproved == 0">
                {{ t.commentTip }}
              </view>

              <qui-topic-content :theme-parts="themeParts" :topic-status="thread.isApproved"
                :follow-show="post.user.follow != null" :avatar-url="post.user.avatarUrl"
                :user-name="post.user.username" :is-real="post.user.isReal" :theme-time="post.createdAt"
                :theme-content="newContentHtml" :user-role="post.user.groups ?Object.values(post.user.groups) : []"
                :images-list="Object.values(post.images)" @personJump="personJump(post.user._jv.id)">
                <!-- 关注 -->
                <!-- <view slot="follow" :key="followStatus" v-if="post.user.follow != null">
                  <view
                    class="themeItem__header__follow"
                    @tap="post.user.follow === 0 ? addFollow(post.user) : deleteFollow(post.user)"
                  >
                    <qui-icon
                      class="icon-follow"
                      :name="post.user.follow === 0 ? 'icon-follow' : 'icon-each-follow'"
                      :color="
                        post.user.follow === 0
                          ? '#777'
                          : post.user.follow === 1
                          ? themeColor
                          : '#ff8888'
                      "
                    ></qui-icon>
                    <text>
                      {{
                        post.user.follow === 0
                          ? i18n.t('profile.following')
                          : post.user.follow === 1
                          ? i18n.t('profile.followed')
                          : i18n.t('profile.mutualfollow')
                      }}
                    </text>
                  </view>
                </view> -->
                <!-- 更多操作 -->
                <view slot="more" @click="moreClick">
                  <view class="det-ft-operaCli">
                    <view class="det-ft-more">
                      <qui-icon name="icon-gengduo" class="icon-gengduo" style="font-size: 40rpx;">
                        >
                      </qui-icon>
                    </view>
                  </view>
                </view>
              </qui-topic-content>
              <view class="thread-box" v-if="loadDetailStatus && !thread.isApproved == 0">
                <view class="thread" v-if="thread.isApproved == 1">
                  <view class="thread__header">
                    <view class="thread__header__img" @click="personJump(thread.user._jv.id)">
                      <qui-avatar :user="thread.user" :is-real="thread.user.isReal" />
                    </view>
                    <view class="thread__header__title">
                      <view class="thread__header__title__top">
                        <span class="thread__header__title__username" @click="personJump(thread.user._jv.id)">
                          {{ thread.user.username }}
                        </span>
                        <span class="thread__header__title__isAdmin" v-for="(group, gindex) in thread.user.groups"
                          :key="gindex" :class="group.isDisplay ? 'thread__header__title__isAdminColor' : ''">
                          {{ group.isDisplay ? `${group.name}` : '' }}
                        </span>
                      </view>
                      <view class="thread__header__title__time">
                        {{ localTime }}
                      </view>
                    </view>
                    <image v-if="thread.price > 0" src="https://www.qiyaoshuizu.cn/static/payment.png" alt class="addFine"
                      :class="thread.isEssence ? 'right40' : ''"></image>
                    <image v-if="thread.isEssence" src="@/static/essence.png" alt class="addFine"></image>
                  </view>

                  <view class="thread__content" @click="contentClick">
                    <view class="thread__content__text">
                      <qui-uparse :content="thread.title" v-if="thread.type == 1"></qui-uparse>
                      <qui-uparse :content="thread.firstPost.summary" v-else></qui-uparse>
                    </view>
                  </view>
                </view>
              </view>
              <view>
                <!-- 点赞用户列表 -->
                <qui-person-list :type="t.giveLike" :person-num="post.likeCount" :limit-count="limitShowNum"
                  :person-list="likedUsers" :btn-show="false" @personJump="personJump"></qui-person-list>
              </view>
              <view class="det-con-ft">
                <view v-if="post.canHide" class="det-con-ft-child" @click="deleteReply(post._jv.id, post.canHide)">
                  <qui-icon name="icon-delete" class="qui-icon"></qui-icon>
                  <view>{{ t.delete }}</view>
                </view>
                <view class="det-con-ft-child" @click="postLikeClick(post._jv.id, '1', post.canLike, post.isLiked)">
                  <qui-icon :name="post.isLiked ? 'icon-liked' : 'icon-like'" class="qui-icon"></qui-icon>
                  <view class="ft-child-word">
                    {{ post.isLiked ? t.giveLikeAlready : t.giveLike }}
                  </view>
                </view>
                <view class="det-con-ft-child" @click="replyComment(post.id, thread.canReply, '0')">
                  <qui-icon name="icon-comments" class="qui-icon"></qui-icon>
                  <view>{{ t.reply }}</view>
                </view>
              </view>
            </view>
            <!-- 评论 -->
            <view class="comment">
              <view class="comment-top">
                <view class="comment-num" :style="{ paddingBottom: post.postCount > 1 ? '0' : '40rpx' }">
                  {{ post.replyCount }}{{ t.item }}{{ t.comment }}
                </view>
                <view class="comment-sort" v-if="thread.postCount > 1">
                  <view class="comment-sort-operaCl" @click="sortOperaClick">
                    <qui-icon name="icon-sort1" class="icon-management" color="#777" size="30"></qui-icon>
                  </view>
                  <view>
                    <qui-drop-down posival="absolute" :show="sortSeleShow" :list="sortSelectList" :top="60" :right="0"
                      :width="220" @click="sortSelectChoice"></qui-drop-down>
                  </view>
                </view>
              </view>

              <view v-if="postComments.length > 0">
                <view v-for="(commentPost, index) in postComments" :key="index">
                  <qui-topic-comment v-if="!commentPost.isDeleted" :comment-type="1"
                    :post-id="commentPost.id || (commentPost._jv && commentPost._jv.id)" :comment-user="
                      commentPost.commentUserId ? commentPost.commentUser : commentUser
                    " :comment-post-id="commentPost.commentPostId ? commentPost.commentPostId : ''"
                    :comment-avatar-url="commentPost.user.avatarUrl"
                    :user-name="commentPost.user.username || commentPost.user.userName"
                    :is-real="commentPost.user.isReal || commentPost.user.isRealName" :is-liked="commentPost.isLiked"
                    :user-role="commentPost.user.groups ?Object.values(commentPost.user.groups) : []"
                    :comment-time="commentPost.createdAt" :comment-status="commentPost.isApproved"
                    :comment-content="commentPost.contentHtml" :comment-like-count="commentPost.likeCount"
                    :images-list="Object.values(commentPost.images)" :reply-count="commentPost.replyCount"
                    :can-delete="commentPost.canHide" :comment-show="true" @personJump="personJump(commentPost.user.id)"
                    @commentLikeClick="
                      commentLikeClick(
                        (commentPost._jv && commentPost._jv.id) || commentPost.id,
                        '4',
                        commentPost.canLike,
                        commentPost.isLiked,
                        index,
                        commentPost,
                      )
                    " @commentJump="
                      commentJump((commentPost._jv && commentPost._jv.id) || commentPost.id)
                    " @imageClick="imageClick" @replyComment="
                      replyComment(
                        (commentPost._jv && commentPost._jv.id) || commentPost.id,
                        thread.canReply,
                        '1',
                        (commentPost.user._jv && commentPost.user._jv.id) || commentPost.user.pid,
                      )
                    " @deleteComment="
                      deleteComment(
                        (commentPost._jv && commentPost._jv.id) || commentPost.id,
                        '3',
                        commentPost.canHide,
                        commentPost.isDeleted,
                        commentPost,
                      )
                    "
                     @reportClick="reportClick"
                    ></qui-topic-comment>
                </view>
              </view>
            </view>
          </view>
          <qui-load-more :status="loadingType" :content-text="{
              contentdown: c.contentdown,
              contentrefresh: c.contentrefresh,
              contentnomore: contentnomoreVal,
            }"></qui-load-more>
        </view>
      </view>
      <!--</scroll-view>-->
      <!--#ifdef MP-WEIXIN-->
      <!--适配小程序底部弹框-->
      <view class="det-ft"></view>
      <!-- #endif -->
      <!--轻提示-->
      <qui-toast ref="toast"></qui-toast>
      <!--回复弹框-->
      <uni-popup ref="commentPopup" type="bottom" class="comment-popup-box">
        <view class="comment-popup" v-if="commentPopupStatus">
          <view class="comment-popup-topbox">
            <view class="comment-popup-top">
              <view class="comment-popup-top-l">
                <qui-icon name="icon-expression" class="comm-icon" :size="40" @click="expressionClick"></qui-icon>
                <qui-icon name="icon-call" :size="40" class="comm-icon" @click="callClick"></qui-icon>
              </view>
              <view class="text-word-tip">
                {{ t.canWrite }}{{ 5000 - textAreaValue.length }}{{ t.word }}
              </view>
            </view>
            <qui-emoji v-if="emojiShow" position="absolute" top="104rpx" border-radius="10rpx"
              :color="emojiShow ? '#1878F3' : '#777'" @click="getEmojiClick"></qui-emoji>
          </view>

          <view class="comment-content-box">
            <view class="comment-content">
              <textarea ref="commentText" :focus="focusVal" :maxlength="5000" class="comment-textarea"
                :placeholder="t.writeComments" placeholder-style="color:#b5b5b5;font-size: 28rpx;"
                placeholder-class="text-placeholder" :show-confirm-bar="barStatus" cursor-spacing="80" v-if="!emojiShow"
                v-model="textAreaValue" @blur="contBlur" @touchmove.stop="touchStop" />
              <view class="comment-textarea" v-show="emojiShow">
                {{ textAreaValue }}
              </view>
            </view>
            <qui-uploader :url="`${url}api/attachments`" :header="header" :form-data="formData" :count="3" name="file"
              async-clear ref="upload" @change="uploadChange" @clear="uploadClear"></qui-uploader>
          </view>
          <button class="publish-btn" @click="publishClick()">
            {{ t.publish }}
          </button>
        </view>
      </uni-popup>
      <uni-popup ref="deletePopup" type="center">
        <uni-popup-dialog type="warn" :content="deleteTip" :before-close="true" @close="handleClickCancel"
          @confirm="handleClickOk"></uni-popup-dialog>
      </uni-popup>
      <!--更多操作弹框-->
      <uni-popup ref="morePopup" type="bottom">
        <view class="popup-share">
          <view class="popup-share-content popup-share-content-inner">
            <view class="popup-share-content-box" v-if="post.canHide"
              @click="moreContent(0, post._jv.id, post.canHide)">
              <view class="popup-share-content-image">
                <view class="popup-share-box">
                  <qui-icon class="content-image" name="icon-delete" size="46" color="#777777"></qui-icon>
                </view>
              </view>
              <text class="popup-share-content-text">{{ t.delete }}</text>
            </view>
            <view class="popup-share-content-box" @click="moreContent(1)">
              <view class="popup-share-content-image">
                <view class="popup-share-box">
                  <qui-icon class="content-image" name="icon-jubao" size="46" color="#777777"></qui-icon>
                </view>
              </view>
              <text class="popup-share-content-text">{{ i18n.t('report.reportTitle') }}</text>
            </view>
          </view>
          <view class="popup-share-content-space"></view>
          <text class="popup-share-btn" @click="moreCancel">{{ c.cancel }}</text>
        </view>
      </uni-popup>
      <!--举报弹框-->
      <uni-popup ref="reportPopup" type="bottom">
        <qui-report ref="report" :current-login-id="currentLoginId" :thread-id="threadId" :comment-id="commentId"
          :report-type="2" @reportClose="reportClose"></qui-report>
      </uni-popup>
    </view>
    <view v-else-if="(loadingStatus && !loaded && !thread.isDeleted) || (loadingStatus && !status)" class="loading">
      <u-loading :size="60"></u-loading>
    </view>
    <qui-page-message v-else-if="thread.isDeleted || post.isDeleted || !loaded || !status"></qui-page-message>
  </qui-page>
</template>

<script>
  /* eslint-disable */
  import {
    status,
    utils
  } from '@/library/jsonapi-vuex/index';
  import {
    mapState,
    mapMutations
  } from 'vuex';
  import user from '@/mixin/user';
  import {
    time2DateAndHM
  } from '@/utils/time';
  import {
    DISCUZ_REQUEST_HOST
  } from '@/common/const';
  import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog';
  import {
    getCurUrl
  } from '@/utils/getCurUrl';
  import loginModule from '@/mixin/loginModule';
  import forums from '@/mixin/forums';
  import {
    modifyPostContentHtml
  } from '@/utils/transformHtml';
  import {
    get
  } from 'lodash';
  import apiRequest from '@/api/new-api';

  export default {
    components: {
      uniPopupDialog
    },
    mixins: [user, loginModule, forums],
    data() {
      return {
        userInfo: {}, // 用户信息
        forumsInfo: {}, // 后台站点信息
        newContentHtml: "", //处理后的html文本
        navTitle: '评论详情页', // 导航栏标题
        threadId: '',
        commentId: '',
        thread: {},
        post: {},
        loadDetailStatus: {},
        loaded: false,
        status: false,
        loadingStatus: true,
        topicStatus: 0, // 0 是不合法 1 是合法 2 是忽略
        posts: [],
        commentIndex: '', //当前回复的index
        postComments: [], //当前评论的回复列表
        postsStatus: false,
        footerShow: true, // 默认显示底部
        commentShow: false, // 显示评论
        commentPopupStatus: false, //回复弹框内容状态是否显示
        emojiShow: false, //表情组件显示状态
        textAreaValue: '', // 评论输入框
        barStatus: false, // 是否显示输入框获取焦点时完成的那一栏
        uploadFile: [], //上传的文件
        publishClickStatus: true, //发布按钮点击状态
        focusVal: true, // 默认输入框获取焦点状态
        header: {},
        formData: {}, // 图片请求data
        placeholderColor: 'color:#b5b5b5', // 默认textarea的placeholder颜色
        isLiked: false, // 主题点赞状态
        role: '管理员',
        isActive: true,
        seleShow: false, // 默认收起管理菜单
        selectList: [{
            text: '编辑',
            type: '0'
          },
          {
            text: '精华',
            type: '2'
          },
          {
            text: '置顶',
            type: '3'
          },
          {
            text: '删除',
            type: '4'
          },
        ], // 管理菜单

        limitShowNum: 12,
        paidStatus: false, // 是否有已支付数据
        rewardStatus: false, // 是否已有打赏数据
        likedStatus: false, // 是否已有点赞数据
        commentStatus: {}, //回复状态
        commentId: '', //当前评论的Id
        loadingType: 'more', // 上拉加载状态
        scrollTop: 0,
        pageNum: 1, //这是主题回复当前页数
        pageSize: 20, //这是主题回复每页数据条数
        contentnomoreVal: '', //数据加载状态提示 暂无评论/没有更多数据
        url: '',
        imageStatus: true, // 头像地址错误时显示默认头像
        likedUsers: [],
        deleteId: '', // 删除时的Id（包括主题id，评论Id，和图片id）
        deleteType: '', // 删除时的类型，3为评论的回复删除，4为评论删除
        deletePostType: '', // 删除回复时传给请求接口的类型
        deletePostCanStatus: '', // 是否可以删除该条内容
        deletePostIsStatus: '', // 删除时的状态
        deletePost: '', // 删除时的整个post数据
        deleteIndex: '', // 删除图片时的Index
        deleteTip: '确定删除吗？', // 删除提示
        deleteImgId: '', // 删除时图片Id
        sortSeleShow: false, // 排序菜单状态
        sortSelectList: [{
            text: this.i18n.t('topic.sortTimeSequence'),
            type: '0',
            canOpera: true
          },
          {
            text: this.i18n.t('topic.sortTimeReverse'),
            type: '1',
            canOpera: true
          },
        ], // 评论排序菜单
        sortVal: 'createdAt', // 排序值
        followStatus: '', // 当前关注状态
        themeParts: 1, // 传给组件的类型
        replyCommentType: '0',
        commentPostId: '', // 当前回复的评论的id(楼中楼)
        commentUserId: '', // 当前回复的评论的用户id
        commentUser: {}, // 顾单新解决的楼中楼问题
      };
    },
    computed: {
      ...mapState({
        getAtMemberData: state => state.atMember.atMemberData,
      }),
      currentLoginId() {
        const userId = this.$store.getters['session/get']('userId');
        return parseInt(userId, 10);
      },

      // postList() {
      //   // console.log(this.$store.getters['jv/get']('posts'));
      //   return this.$store.getters['jv/get']('posts');
      // },
      // 语言包
      t() {
        return this.i18n.t('topic');
      },
      // core公共变量语言包
      c() {
        return this.i18n.t('core');
      },
      // 时间转化
      localTime() {
        if (this.thread.createdAt) {
          return time2DateAndHM(this.thread.createdAt ? this.thread.createdAt : '');
        }
      },
    },
    onLoad(option) {
      this.threadId = option.threadId;
      this.commentId = option.commentId;
      this.loadPost();
      this.loadThread();
      this.loadPostComments();
      this.url = DISCUZ_REQUEST_HOST;
      const token = uni.getStorageSync('access_token');

      this.header = {
        authorization: `Bearer ${token}`,
      };
      this.formData = {
        type: 1,
      };
    },
    // 下拉刷新
    onPullDownRefresh() {
      const _this = this;
      _this.pageNum = 1;
      _this.postComments = [];
      setTimeout(function() {
        _this.loadPost();
        _this.loadThread();
        _this.loadPostComments();
        uni.stopPullDownRefresh();
      }, 1000);
    },
    // 上拉加载
    onReachBottom() {
      if (this.loadingType !== 'more') {
        return;
      }
      this.pageNum += 1;
      this.loadPostComments();
    },
    // 监听页面滚动，参数为Object
    onPageScroll(event) {
      this.scrollTop = event.scrollTop;
    },
    onUnload() {
      this.$store.dispatch('forum/setError', {
        loading: false
      });
    },
    onShow() {
      let atMemberList = '';
      this.getAtMemberData.map(item => {
        atMemberList += `@${item.username} `;
        return atMemberList;
      });
      this.textAreaValue = `${this.textAreaValue.slice(0, this.cursor) +
      atMemberList +
      this.textAreaValue.slice(this.cursor)}`;
      this.setAtMember([]);
    },
    mounted() {
      this.getUserInfo();
      this.getForumsInfo();

    },
    methods: {

      ...mapMutations({
        setAtMember: 'atMember/SET_ATMEMBER',
      }),
      touchStop() {
        return;
      },
      // loadpost() {
      //   var post = this.$store.getters['jv/get'](`posts/${this.commentId}`);
      //   //添加start
      //   this.newContentHtml = modifyPostContentHtml(post.contentHtml);
      //   //添加end
      //   let hasFirst = false;
      //   console.log('post.user.groups',post.user.groups)
      //   let groups= Object.values(post.user.groups)
      //   post.user.groups=undefined;
      //   // post.user.groups=groups;
      //   console.log('post.user.groups1',post.user.groups)
      //   if (post.user && post.user.groups.length > 0) {
      //     post.user.groups = post.user.groups.filter(group => {
      //       if (group.isDisplay === true && !hasFirst) {
      //         hasFirst = true;
      //         return true;
      //       }
      //     });
      //   }
      //   this.likedUsers = post.likedUsers;
      //   this.post=post;
      // },
      // 获取用户信息
      getUserInfo() {
        const userId = this.$store.getters['session/get']('userId');
        const params = {
          include: ''
        };
        this.$store.dispatch('jv/get', [`users/${userId}`, {
          params
        }]).then(res => {
          if (res && res._jv && res._jv.id) {
            this.userInfo = res;
            // console.log('用户信息', this.userInfo);
          }
        });
      },
      // 获取站点信息
      getForumsInfo() {
        const params = {
          include: ''
        };
        this.$store.dispatch('jv/get', [`forum`, {
          params
        }]).then(res => {
          if (res && res._jv && res._jv.id) {
            this.forumsInfo = res;
            // console.log('站点信息', this.forumsInfo);
          }
        });
      },
      // 判断是否需实名制
      isPublishNeedRealName() {
        if (!this.forumsInfo.other.publish_need_real_name) {
          return true;
        }
        if (this.forumsInfo.other.publish_need_real_name) {
          if (!this.userInfo.isReal) {
            this.$refs.toast.show({
              message: '请先实名认证'
            });
            return false;
          }
          if (this.userInfo.isReal) {
            return true;
          }
        }
      },
      // 判断是否需绑定手机
      isPublishNeedBindPhone() {
        if (!this.forumsInfo.other.publish_need_bind_phone) {
          return true;
        }
        if (this.forumsInfo.other.publish_need_bind_phone) {
          if (this.userInfo.mobile === "") {
            this.$refs.toast.show({
              message: '请先绑定手机'
            });
            return false;
          }
          if (this.userInfo.mobile !== "") {
            return true;
          }
        }
      },
      // 阻止在评论详情页跳转评论详情页
      commentJump() {
        return;
      },
      //添加end
      // 唤起小程序原声分享
      onShareAppMessage(res) {
        // 来自页面内分享按钮
        if (res.from === 'button') {
          const threadShare = this.$store.getters['jv/get'](`/threads/${this.threadId}`);
          return {
            title: threadShare.type === 1 ? threadShare.title : threadShare.firstPost.summaryText,
            path: `/topic/index?id=${this.threadId}`,
          };
        }
        return {
          title: threadShare.type === 1 ? threadShare.title : threadShare.firstPost.summaryText,
          path: `/topic/index?id=${this.threadId}`,
        };
      },
      // 分享到朋友圈
      onShareTimeline() {
        return {
          title: this.forums.set_site.site_name,
          query: '',
        };
      },
      // 加载当前评论数据
      loadPost() {
        const params = {
          include: [
            'user',
            'user.groups',
            'likedUsers',
            'commentPosts',
            'commentPosts.user',
            'commentPosts.user.groups',
            'commentPosts.replyUser',
            'commentPosts.replyUser.groups',
            'commentPosts.mentionUsers',
            'commentPosts.images',
            'images',
            'attachments',
          ],
        };
        this.loadPostStatus = status.run(() =>
          this.$store
          .dispatch('jv/get', ['posts/' + this.commentId, {
            params
          }])
          .then(data => {

            if (data.isDeleted) {
              this.$store.dispatch('forum/setError', {
                code: 'TYPE_404',
                status: 500,
              });
              this.loaded = false;
            } else {

              // #ifndef MP-WEIXIN
              if (data.summaryText) {
                uni.setNavigationBarTitle({
                  title: data.summaryText.slice(0, 80),
                });
              } else {
                uni.setNavigationBarTitle({
                  title: this.t.commentPageTitle,
                });
              }
              // #endif
              this.loaded = true;
              this.post=data;

            }
            this.loadingStatus = false;
          })
          .catch(err => {
            this.loaded = false;
            this.loadingStatus = false;
            if (err.statusCode === 404) {
              this.$store.dispatch('forum/setError', {
                code: 'type_404',
                status: 500,
              });
            }
          }),
        );
      },
      // 加载当前回复的主题数据
      loadThread() {
        const params = {
          'filter[isDeleted]': 'no',
          include: ['user.groups', 'user', 'firstPost'],
        };
        this.loadDetailStatus = status.run(() =>
          this.$store
          .dispatch('jv/get', ['threads/' + this.threadId, {
            params
          }])
          .then(data => {
            if (data.isDeleted) {
              this.$store.dispatch('forum/setError', {
                code: 'thread_deleted',
                status: 500,
              });
              this.status = false;
            } else {
              this.status = true;
            }
            let hasFirst = false;
            if (data.user && data.user.groups.length > 0) {
              data.user.groups = data.user.groups.filter(group => {
                if (group.isDisplay === true && !hasFirst) {
                  hasFirst = true;
                  return true;
                }
              });
            }
            this.thread =data;
            this.loadingStatus = false;
          })
          .catch(err => {
            this.status = false;
            this.loadingStatus = false;
            if (err.statusCode === 404) {
              this.$store.dispatch('forum/setError', {
                code: 'type_404',
                status: 500,
              });
            }
          }),
        );
      },

      // post操作调用接口（包括type 1评论点赞，2删除评论，3删除评论的某条回复，4评论的回复点赞）
      postOpera(id, type, canStatus, isStatus, commentPost) {
        if (type == '1' && !canStatus) {
          this.$refs.toast.show({
            message: this.t.noReplyLikePermission
          });
          return;
        }
        if (type == '4' && !canStatus) {
          this.$refs.toast.show({
            message: this.t.noCommentLikePermission
          });
          return;
        }
        const jvObj = {
          type: 'posts',
          id: id,
        };
        let params = {};
        if (type == '1'|| type=='4') { // 评论的赞
         params = {
           _jv: jvObj,
           isLiked: !isStatus,
         };

        } else if (type == '2') {
          params = {
            _jv: jvObj,
            isDeleted: !isStatus,
          };
        } else if (type == '3') {
          params = {
            _jv: jvObj,
            isDeleted: !isStatus,
          };
        } else if (type == '14') { // 回复的赞

          params = {
            _jv: jvObj,
            isLiked: !isStatus,
          };
        }
        if (type == '14') {
          apiRequest.updatePosts({
              data: params
            }).then(data => {
              console.log('updatePosts',data)
              if (type == '1') {
                const orgignPost = this.$store.getters['jv/get'](`posts/${id}`);
                // 当前评论点赞
                this.isLiked = data.Data.isLiked;
                if (this.isLiked) {
                  this.likedUsers.unshift(this.user);
                  orgignPost.likeCount = orgignPost.likeCount += 1;
                  orgignPost._jv.relationships.likedUsers.data.unshift({
                    type: this.user._jv.type,
                    id: this.user._jv.id,
                  });
                } else {
                  orgignPost.likeCount = orgignPost.likeCount -= 1;
                  this.likedUsers.forEach((value, key, item) => {
                    value.id == this.user.id && item.splice(key, 1);
                  });
                  orgignPost._jv.relationships.likedUsers.data.forEach((value, key, item) => {
                    value.id == this.user.id && item.splice(key, 1);
                  });
                }
                orgignPost.isLiked = data.Data.isLiked;
              } else if (type == '4') {
                let postArr = commentPost;
                postArr.isLiked = data.Data.isLiked;
                postArr.likeCount = data.Data.likeCount;
                commentPost = postArr;
                if (data.Data.isLiked) {
                  // 评论点赞成功
                } else {
                  // 评论点赞失败
                }
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
         this.$store
           .dispatch('jv/patch', params)
           .then(data => {
             if(type==1){
               const orgignPost = this.$store.getters['jv/get'](`posts/${id}`);
                // 当前评论点赞
               this.isLiked = data.isLiked;
               this.post.isLiked=data.isLiked;
               // if (this.isLiked) {
               //   this.likedUsers.unshift(this.user);
               //   orgignPost.likeCount = orgignPost.likeCount += 1;
               //   let user=Object.values()
               //   orgignPost._jv.relationships.user.data.unshift({
               //     type: this.user._jv.type,
               //     id: this.user._jv.id,
               //   });
               // } else {
               //   orgignPost.likeCount = orgignPost.likeCount -= 1;
               //   this.likedUsers.forEach((value, key, item) => {
               //     value.id == this.user.id && item.splice(key, 1);
               //   });
               //   orgignPost._jv.relationships.user.data.forEach((value, key, item) => {
               //     value.id == this.user.id && item.splice(key, 1);
               //   });
               // }
               orgignPost.isLiked = data.isLiked;
             }
              else if (type == '2') {
                if (data.isDeleted) {
                  uni.navigateBack({
                    delta: 1,
                  });

                  // uni.navigateBack({
                  //   url: '/topic/index?id=' + this.threadId,
                  // });
                  this.$refs.toast.show({
                    message: this.t.deleteSuccessAndJumpToTopic
                  });
                } else {
                  this.$refs.toast.show({
                    message: this.t.deleteFailed
                  });
                }
              } else if (type == '3') {
                let postArr = commentPost;
                postArr.isDeleted = data.isDeleted;
                commentPost = postArr;
                // this.post.replyCount--;
                const orgignPost = this.$store.getters['jv/get'](`posts/${this.commentId}`);
                orgignPost.replyCount -= 1;
                if (data.isDeleted) {
                  // 回复的评论删除成功
                  this.$u.event.$emit('deleteComment', {
                    data: data,
                    commentId: this.commentId
                  });
                  this.$refs.toast.show({
                    message: this.t.deleteSuccess
                  });
                } else {
                  // 回复的评论删除失败
                  this.$refs.toast.show({
                    message: this.t.deleteFailed
                  });
                }
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      },

      // 主题回复调用接口
      postComment() {
        if (this.textAreaValue.length < 1) {
          this.$refs.toast.show({
            message: this.t.replyContentCannotBeEmpty
          });
          this.publishClickStatus = true;
          return false;
        }
        const params = {
          id: parseInt(this.threadId),
          content: this.textAreaValue,
          replyId: this.commentId,
          isComment: true,
        }
        if (this.replyCommentType === '0') {
          // 这是二级回复
          // params.replyId = this.commentId;
        } else if (this.replyCommentType === '1') {
          // 这是三级回复
          params.commentPostId = this.commentPostId;
          params.commentUserId = this.commentUserId;
        }
        params.attachments = [];
        if (this.uploadFile) {
          this.uploadFile.forEach(item => {
            params.attachments.push({
              type: 'attachments',
              id: item.id,
            });
          });
        }
        apiRequest.createPosts({
            data: params
          })
          .then(res => {
            if (res.Message === '操作太频繁了，请稍后再试') {
              this.$refs.commentPopup.close();
              this.publishClickStatus = true;
              this.textAreaValue = '';
              this.uploadFile = '';
              return;
            }
            res=res;
            if (res.Data.isApproved == 1) {
              let hasFirst = false;

              res.contentHtml = modifyPostContentHtml(res.Data.contentHtml); //添加
              this.postComments.push(res.Data);
              this.$u.event.$emit('addComment', {
                data: res.Data,
                commentId: this.commentId
              });
            } else {
              this.$refs.toast.show({
                message: this.t.publishExamineTip
              });
            }
            this.$refs.commentPopup.close();
            this.commentPopupStatus = false;
            this.publishClickStatus = true;
            const orgignPost = this.$store.getters['jv/get'](`posts/${this.commentId}`);

            orgignPost.replyCount += 1;
            this.textAreaValue = '';
            this.uploadFile = '';
          })
          .catch(err => {
            this.publishClickStatus = true;
            console.log(err);
          });
      },

      // 加载当前评论的回复数据
      loadPostComments() {
        const params = {
          'filter[isApproved]': 1,
          'filter[thread]': this.threadId,
          'page[number]': this.pageNum,
          'page[limit]': this.pageSize,
          'filter[isDeleted]': 'no',
          'filter[isComment]': 'yes',
          'filter[reply]': this.commentId,
          include: ['replyUser', 'commentUser', 'user.groups', 'user', 'images'],
          sort: this.sortVal,
        };
        this.loadPostCommentStatus = status.run(() =>
          this.$store.dispatch('jv/get', ['posts', {
            params
          }]).then(data => {

            if (data._jv) {
              delete data._jv;
            }
            data=Object.values(data);
            data.forEach((item, index) => {
              let hasFirst = false;

              let groups=Object.values(item.user.groups);
              item.user.groups = groups.filter(group => {
                if (group.isDisplay === true && !hasFirst) {
                  hasFirst = true;
                  return true;
                }
                return false;
              });
              item.contentHtml = modifyPostContentHtml(item.contentHtml);
            });

            this.postComments = [...this.postComments, ...data];
            // 添加
            this.loadingType = data.length === this.pageSize ? 'more' : 'nomore';
            if (data.length == 0) {
              this.contentnomoreVal = this.t.noComment;
            } else {
              this.contentnomoreVal = this.t.noMoreData;
            }
            this.postsStatus = true;
          }),
        );
      },
      // 对象转数组
      limitArray(obj) {
        const arr = [];
        Object.values(obj).forEach(item => {
          arr.push(item);
        });
        return arr;
      },
      // 添加关注
      addFollow(userInfo) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5
          this.h5LoginMode();
          // #endif
        }
        const originUser = this.$store.getters['jv/get'](`users/${userInfo.id}`);
        const params = {
          _jv: {
            type: 'follow',
          },
          type: 'user_follow',
          to_user_id: userInfo.id,
        };
        this.$store.dispatch('jv/post', params).then(res => {
          if (res.is_mutual == 0) {
            this.post.user.follow = 1;
            originUser.follow = 1;
            this.followStatus = 1;
          } else {
            this.post.user.follow = 2;
            originUser.follow = 2;
            this.followStatus = 2;
          }
        });
      },
      // 取消关注
      deleteFollow(userInfo) {
        const originUser = this.$store.getters['jv/get'](`users/${userInfo.id}`);
        this.$store.dispatch('jv/delete', `follow/${userInfo.id}/1`).then(() => {
          this.post.user.follow = 0;
          originUser.follow = 0;
          this.followStatus = 0;
        });
      },
      // 点击排序
      sortOperaClick() {
        this.sortSeleShow = !this.sortSeleShow;
      },
      // 管理菜单内标签点击事件
      sortSelectChoice(param) {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5
          this.h5LoginMode();
          // #endif
        }
        this.sortSeleShow = false;

        if (param.type === '0') {
          if (this.sortVal === 'createdAt') {
            this.$refs.toast.show({
              message: this.t.itsAlreadyWantedSort
            });
          } else {
            this.refreshVal = false;

            this.$nextTick(() => {
              this.refreshVal = true;
            });
            this.sortVal = 'createdAt';
            this.postComments = [];
            this.loadPostComments();
          }
        } else if (param.type === '1') {
          if (this.sortVal === '-createdAt') {
            this.$refs.toast.show({
              message: this.t.itsAlreadyWantedSort
            });
          } else {
            this.refreshVal = false;
            this.sortVal = '-createdAt';
            this.postComments = [];
            this.loadPostComments();
            this.$nextTick(() => {
              this.refreshVal = true;
            });
          }
        }
      },
      // 跳转到用户主页
      personJump(id) {
        if (id <= 0) {
          return;
        }
        uni.navigateTo({
          url: `/pages/profile/index?userId=${id}`,
        });
      },

      // 回复文本域失去焦点时，获取光标位置
      contBlur(e) {
        this.cursor = e.detail.cursor;
      },
      // 点击表情插入到文本域
      getEmojiClick(code) {
        let text = '';
        text = `${this.textAreaValue.slice(0, this.cursor) +
        code +
        this.textAreaValue.slice(this.cursor)}`;

        this.textAreaValue = text;
        this.emojiShow = false;
      },
      expressionClick() {
        this.emojiShow = !this.emojiShow;
      },
      // 点击@跳转到@页
      callClick() {
        uni.navigateTo({
          url: `/pages/user/at-member`,
        });
      },

      // 上传图片
      uploadChange(e) {
        this.uploadFile = e;
      },
      // 删除图片
      uploadClear(list, del) {
        const id = list.id;
        this.deleteType = 0;
        this.deleteImgId = id;
        this.deleteIndex = del;
        this.$refs.deletePopup.open();
        this.deleteTip = this.i18n.t('core.deleteImgSure');
        // this.delAttachments(id, del).then(() => {
        //   this.$refs.upload.clear(del);
        // });
      },
      // 删除图片
      delAttachments(id) {
        const params = {
          _jv: {
            type: 'attachments',
            id,
          },
        };

        return this.$store
          .dispatch('jv/delete', params)
          .then(res => {
            return res;
          })
          .catch(err => {
            console.log(err);
          });
      },

      // 评论点回复击发布事件
      publishClick() {
        this.publishClickStatus = false;
        this.postComment(this.commentId);
      },
      // // 评论点赞
      postLikeClick(postId, type, canStatus, isStatus) {
        this.postOpera(postId, type, canStatus, isStatus);
      },
      // 删除当前评论
      deleteReply(postId, canStatus) {
        this.$refs.deletePopup.open();
        this.deleteType = '2';
        this.deleteId = postId;
        this.deleteTip = this.i18n.t('core.deleteCommentSure');
        // this.postOpera(postId, '2');
      },
      // 删除评论的回复
      deleteComment(postId, type, canStatus, isStatus, commentPost) {
        this.$refs.deletePopup.open();
        this.deleteId = postId;
        this.deleteType = '3';
        this.deletePostCanStatus = canStatus;
        this.deletePostIsStatus = isStatus;
        this.deletePost = commentPost;
        this.deleteTip = this.i18n.t('core.deleteReplySure');
        // this.postOpera(postId, '3', canStatus, isStatus, commentPost);
      },
      handleClickOk() {
        this.$refs.deletePopup.close();
        if (this.deleteType === '2') {
          // 删除类型为当前评论
          this.postOpera(this.deleteId, '2');
        } else if (this.deleteType === '3') {
          // 删除类型为评论的回复
          this.postOpera(
            this.deleteId,
            '3',
            this.deletePostCanStatus,
            this.deletePostIsStatus,
            this.deletePost,
          );
        } else if (this.deleteType === 0) {
          // 删除类型为回复时上传的图片
          this.delAttachments(this.deleteImgId, this.deleteIndex).then(() => {
            this.$refs.upload.clear(this.deleteIndex);
            this.$refs.upload.getValue().forEach((value, key, item) => {
              value.id == this.deleteImgId && item.splice(key, 1);
            });
          });
        }
      },

      handleClickCancel() {
        this.$refs.deletePopup.close();
      },
      // 评论的回复
      replyComment(postId, canStatus, type, commentUserId) {
        // 判断是否需要绑定手机或实名认证
        if (!this.isPublishNeedRealName() || !this.isPublishNeedBindPhone()) return;

        if (!canStatus) {
          this.$refs.toast.show({
            message: this.t.noReplyPermission
          });
        } else {
          this.replyCommentType = type;
          this.commentUserId = commentUserId;
          this.commentPostId = postId;
          this.$refs.commentPopup.open();
          this.commentPopupStatus = true;
        }
      },
      // 跳回到主题详情页
      contentClick() {
        const pages = getCurrentPages();
        const delta = pages.indexOf(pages[pages.length - 1]);
        if (get(pages, `[${delta - 1}].route`) === '/topic/index') {
          uni.navigateBack({
            delta: 1,
          });
        } else {
          uni.navigateTo({
            url: `/topic/index?id=${this.threadId}`,
          });
        }
      },
      // 当前回复点赞
      commentLikeClick(postId, type, canLike, isLiked, commentIndex, commentPost) {
        this.commentIndex = commentIndex;
        this.postOpera(postId, '4', canLike, isLiked, commentPost);
      },
      // // 下拉加载
      // pullDown() {
      //   if (this.loadingType !== 'more') {
      //     return;
      //   }
      //   this.pageNum += 1;
      //   this.loadPostComments();
      // },
      // 头像失效
      imageError() {
        this.imageStatus = false;
      },
      // 更多操作-唤起弹框
      moreClick() {
        if (!this.$store.getters['session/get']('isLogin')) {
          uni.setStorage({
            key: 'page',
            data: getCurUrl(),
          });
          // #ifdef MP-WEIXIN
          this.mpLoginMode();
          // #endif
          // #ifdef H5
          this.h5LoginMode();
          // #endif
        }
        this.$refs.morePopup.open();
      },
      // 更多操作内标签选择
      moreContent(type, id, canHide) {
        this.moreCancel();
        if (type === 0) {
          this.deleteReply(id, canHide);
        } else {
          this.reportClick();
        }
      },
      // 关闭更多操作弹框
      moreCancel() {
        this.$refs.morePopup.close();
      },
      // 关闭举报弹框
      reportClose(val) {
        this.$refs.reportPopup.close();
      },
      // 举报
      reportClick() {
        this.$refs.reportPopup.open();
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import '@/styles/base/variable/global.scss';
  @import '@/styles/base/theme/fn.scss';

  page {
    padding: 0;
    margin: 0;
    font-size: $fg-f4;
    color: --color(--qui-FC-333);
  }

  * {
    padding: 0;
    margin: 0;
    font-size: $fg-f4;
    color: --color(--qui-FC-333);
  }

  .flex {
    display: flex;
  }

  .content {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
  }

  .bg-white {
    background-color: --color(--qui-BG-2);
    border: 1px solid --color(--qui-BOR-ED);
  }

  .detail-tip {
    display: block;
    width: 100%;
    font-size: $fg-f4;
    line-height: 60rpx;
    color: #fff;
    text-align: center;
    background: --color(--qui-RED);
  }

  .detail-hd {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    padding: 30rpx 40rpx 37rpx;
    box-sizing: border-box;

    .det-hd-per-head-box {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;

      .det-hd-per-head {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .det-hd-per-info {
      width: 400rpx;
      padding-left: 20rpx;

      .det-hd-per-name {
        margin-bottom: 10px;
        font-size: $fg-f4;
        font-weight: bold;
        line-height: 37rpx;
      }

      .det-hd-post-time {
        font-size: $fg-f2;
        line-height: 31rpx;
        color: --color(--qui-FC-AAA);
      }
    }
  }

  .det-hd-opera {
    align-self: flex-end;
    text-align: right;
    flex-shrink: 0;

    .essence {
      display: inline-block;
      width: 39rpx;
      height: 44rpx;
    }
  }

  .det-hd-operaCli {
    position: relative;
    z-index: 10;

    .det-hd-management {
      display: flex;
      flex-direction: row;
      line-height: 1;

      .icon-management {
        margin-right: 7rpx;
        font-size: 26rpx;
      }
    }

    font-size: $fg-f4;
    line-height: 40rpx;
  }

  //详情页帖子内容
  .detail-post-content {
    padding: 0 40rpx 30rpx;
    text-align: left;

    .det-post-con {
      line-height: 45rpx;
    }

    .det-post-img-list {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      padding: 30rpx 0;
      // flex-wrap: wrap;
    }

    .det-post-img-box {
      .det-post-img {
        width: 314rpx;
        vertical-align: top;
      }
    }

    .det-post-tag-list {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      flex-wrap: wrap;

      .det-post-tag {
        padding: 10rpx 20rpx;
      }
    }
  }

  .det-con-ft {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 0 40rpx 30rpx;
    box-sizing: border-box;

    &-child {
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: $fg-f4;
      color: --color(--qui-FC-777);
      align-items: center;

      .qui-icon {
        margin-right: 17rpx;
        font-size: 30rpx;
      }

      * {
        font-size: $fg-f4;
        color: --color(--qui-FC-777);
      }
    }
  }

  .pad-top {
    padding-top: 0;
  }

  //评论
  .comment {
    width: 100%;
    padding: 40rpx 0 0;
    margin-top: 30rpx;
    background: --color(--qui-BG-2);
    box-sizing: border-box;
  }

  .comment-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 40rpx;
  }

  .comment-num {
    font-size: $fg-f4;
    font-weight: bold;
    line-height: 37rpx;
  }

  .comment-sort {
    position: relative;
    z-index: 1;
  }

  // .comment-num {
  //   padding: 0 40rpx;
  //   font-size: $fg-f4;
  //   font-weight: bold;
  //   line-height: 37rpx;
  // }
  .comment-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40rpx 0;
  }

  .comment-child-hd {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .comment-child-per-head-box {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;

      .comment-child-per-head {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .comment-child-status {
      align-items: flex-start;
      padding-top: 8rpx;
      font-size: $fg-f3;
      line-height: 35rpx;
      color: --color(--qui-RED);
    }
  }

  .comment-child-per-info {
    width: 480rpx;
    padding-left: 20rpx;

    .comment-child-per-det {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      .comment-child-per-name {
        margin-bottom: 10rpx;
        font-weight: bold;
        line-height: 37rpx;
      }

      .comment-chile-per-role {
        line-height: 37rpx;
        color: --color(--qui-FC-AAA);
      }
    }

    .comment-child-time {
      font-size: $fg-f2;
      line-height: 31rpx;
      color: --color(--qui-FC-AAA);
    }
  }

  .comment-child-con {
    padding: 20rpx 0 40rpx;
    font-size: $fg-f4;
    line-height: 45rpx;
    text-align: left;

    .comment-child-con-all {
      color: --color(--qui-LINK);

      * {
        color: --color(--qui-LINK);
      }
    }
  }

  .ft-gap {
    width: 100%;
    // margin-bottom: 80rpx;
  }

  .det-ft {
    position: fixed;
    bottom: 0;
    left: 0;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0;
    line-height: 80rpx;
    background: --color(--qui-FC-FFF);
    box-shadow: 0 -3rpx 6rpx rgba(0, 0, 0, 0.05);
  }

  .det-ft-child {
    flex: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 80rpx;
    color: --color(--qui-FC-777);

    .qui-icon {
      margin-right: 18rpx;
      font-size: 30rpx;
      line-height: 80rpx;
    }

    .ft-child-word {
      font-size: $fg-f4;
      color: --color(--qui-FC-777);
    }
  }

  .comment-popup-box {
    width: 100%;
    padding-top: 40rpx;
  }

  .comment-popup {
    width: 100%;
    background: --color(--qui-BG-2);
    border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx;
    box-sizing: border-box;
  }

  .comment-popup-topbox {
    position: relative;
    padding: 40rpx 0 20rpx;
    margin: 0 40rpx;
  }

  .comment-popup-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .comment-popup-top-l {
      // flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 195rpx;
    }

    .text-word-tip {
      font-size: $fg-f2;
      line-height: 1;
      color: --color(--qui-FC-777);
    }

    .comm-icon {
      flex: 1;
      color: --color(--qui-FC-777);
    }
  }

  .comment-content-box {
    padding: 0 40rpx 30rpx 30rpx;

    .comment-content {
      width: 100%;
      height: 260rpx;
      padding: 20rpx 20rpx 0;
      overflow: hidden;
      background: --color(--qui-FC-GRAY);
      border: 1px solid --color(--qui-FC-DDD);
      border-radius: 7rpx;
      box-sizing: border-box;
    }

    .comment-textarea {
      width: 100%;
      height: 220rpx;
      min-height: 70rpx;
      font-size: $fg-f4;
      line-height: 37rpx;
    }

    .text-placeholder {
      font-size: 28rpx;
    }
  }

  .publish-btn {
    width: 100%;
    height: 100rpx;
    font-size: $fg-f4;
    line-height: 100rpx;
    color: --color(--qui-FC-FFF);
    text-align: center;
    background: --color(--qui-MAIN);
    /* #ifdef H5-PLAY || MP-WEIXIN-PLAY */
    background: #ea3d5a;
    /* #endif */
    border-radius: 0;
  }

  .popup-share {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    background: --color(--qui-BG-2);
  }

  .popup-share-box {
    width: 120rpx;
    height: 120rpx;
    line-height: 120rpx;
    background: --color(--qui-BG-40);
    border-radius: 10px;
  }

  .popup-share-content {
    padding-top: 40rpx;
    padding-right: 97rpx;
    padding-left: 98rpx;
  }

  .popup-share-content-inner {
    padding-right: 96px;
    padding-left: 98px;
  }

  .popup-share-content-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    width: 120rpx;
    height: 164rpx;
    // background: --color(--qui-BG-2);
  }

  .popup-share-content-image {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    // align-items: center;
    width: 120rpx;
    height: 120rpx;
    overflow: hidden;
    border-radius: 7rpx;
  }

  .content-image {
    width: 60rpx;
    height: 60rpx;
    margin: 35rpx;
    line-height: 60rpx;
  }

  .popup-share-content-text {
    padding-top: 5px;
    font-size: $fg-f3;
    color: --color(--qui-FC-TAG);
  }

  .popup-share-content-space {
    width: 100%;
    height: 9rpx;
    background: --color(--qui-FC-DDD);
  }

  .thread-box {
    padding: 50rpx 40rpx 80rpx;
  }

  .thread {
    padding: 20rpx;
    background: --color(--qui-BG-ED);
    border-radius: 5rpx;

    &__header {
      position: relative;
      display: flex;
      width: 100%;
      height: 80rpx;
      margin-bottom: 12rpx;

      &__img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 18rpx;
        background: #ccc;
        border-radius: 100%;

        image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }

      &__title {
        flex: 1;

        &__top {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          height: 37rpx;
          margin-bottom: 10rpx;
          margin-left: 2rpx;
          font-size: $fg-f4;
          line-height: 37rpx;
        }

        &__username {
          // display: flex;
          height: 37rpx;
          max-width: 326rpx;
          overflow: hidden;
          font-weight: bold;
          line-height: 37rpx;
          // color: rgba(51, 51, 51, 1);
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: nowrap;
        }

        &__isAdmin {
          display: inline-block;
          height: 37rpx;
          font-weight: 400;
          line-height: 37rpx;
          color: rgba(170, 170, 170, 1);
        }

        &__isAdminColor {
          padding: 2rpx 10rpx;
          margin-left: 15rpx;
          font-size: $fg-f1;
          background: --color(--qui-BG-IT);
          border-radius: 18rpx;
          box-sizing: border-box;
        }

        &__time {
          font-size: 24rpx;
          font-weight: 400;
          line-height: 31rpx;
          color: rgba(170, 170, 170, 1);
        }

        &__jumpBtn {
          float: right;
          width: 10rpx;
          height: 37rpx;
          font-size: 10rpx;
          line-height: 37rpx;
          color: #ddd;
        }

        &__deleteBtn {
          float: right;
        }

        &__reward {
          float: right;
          font-size: $fg-f4;
          font-weight: bold;
          color: --color(--qui-RED);
        }
      }
    }

    &__content {
      &__text {
        display: flex;
        overflow: hidden;
        flex-direction: column;
        flex-wrap: wrap;
        font-size: $fg-f4;
        line-height: 45rpx;
        word-break: break-all;
      }
    }
  }

  .addFine {
    position: absolute;
    top: -25rpx;
    right: 0;
    width: 31rpx;
    height: 41rpx;
  }

  .right40 {
    right: 40rpx;
  }

  .themeItem__header__follow {
    align-self: flex-start;
    width: 168rpx;
    line-height: 1;
    text-align: right;
    flex-shrink: 0;

    .icon-follow {
      margin-right: 7rpx;
      font-size: $fg-f3;
    }
  }

  .det-ft-operaCli {
    position: relative;
    line-height: 30rpx;

    .det-ft-more {
      display: flex;
      justify-content: flex-end;

      .icon-gengduo {
        color: --color(--qui-FC-AAA);
      }
    }
  }

  // 举报弹框
  .popup-report {
    background: --color(--qui-BG-2);
    border-radius: 10rpx 10rpx 0rpx 0rpx;

    &__title {
      padding: 40rpx 0rpx;
      text-align: center;

      &-headline {
        font-size: $fg-f4;
        color: --color(--qui-FC-333);
      }

      &-subhead {
        margin-top: 20rpx;
        font-size: $fg-f2;
        color: --color(--qui-FC-AAA);
      }
    }

    &__content {
      padding-left: 40rpx;

      &-cell {
        display: flex;
        padding-right: 40rpx;
        line-height: 100rpx;
        border-bottom: 1px solid var(--qui-BOR-ED);
        align-items: center;
        justify-content: space-between;
      }

      &-cell:last-child {
        border-bottom: 0;
      }

      &-textarea {
        padding-right: 40rpx;

        textarea {
          width: 100%;
          height: 180rpx;
          padding: 20rpx;
          font-size: $fg-f4;
          background-color: --color(--qui-BG-1);
          border: 1px solid var(--qui-BOR-DDD);
          box-sizing: border-box;
        }
      }
    }

    &__btn {
      margin-top: 30rpx;
      background: --color(--qui-BG-ED);

      &-confirm {
        width: 100%;
        height: 100rpx;
        margin-bottom: 10rpx;
        font-size: $fg-f4;
        font-weight: normal;
        line-height: 100rpx;
        color: --color(--qui-FC-FFF);
        text-align: center;
        background: --color(--qui-MAIN);
        border-radius: 0;
      }

      &-cancel {
        width: 100%;
        height: 100rpx;
        font-size: $fg-f4;
        font-weight: normal;
        line-height: 100rpx;
        text-align: center;
        background: --color(--qui-FC-FFF);
      }
    }

    .textarea-placeholder {
      font-size: $fg-f4;
      color: --color(--qui-FC-B5);
    }
  }
  .scroll-y{
    /* #ifdef H5 */
    padding-top: 60rpx;
    /* #endif */
  }
</style>
